<template>
  <ContentDetailWrap :title="t('warehouse.add')">
    <template #header>
      <BaseButton @click="go(-1)">
        {{ t('common.back') }}
      </BaseButton>
    </template>
    <div class="w-full flex justify-between">
      <div class="w-85%">
        <Descriptions :schema="descriptionSchema" :data="form" />
      </div>
    </div>
  </ContentDetailWrap>
</template>

<script setup lang="tsx">
import { ContentDetailWrap } from '@/components/ContentDetailWrap'
import {
  ElButton,
  ElLink,
  ElMessage,
  type FormInstance,
  type FormRules,
  type UploadFile,
  type UploadFiles,
  type UploadProps
} from 'element-plus'
import { getEnumApi, getInfoApi } from '@/api/customerFollow'
import { Descriptions, type DescriptionsSchema } from '@/components/Descriptions'
import { useEnumeratePicker } from '@/utils'
import { ElImage } from 'element-plus'
import { useClipboard } from '@vueuse/core'

const { copy } = useClipboard()
const { t } = useI18n()
const { push, go } = useRouter()
const { query } = useRoute()

const modelList = ref<Array<Record<string, any>>>([])

interface FileItem {
  uid: number
  name: string
  url: string
  type: string
  id: string
}

const methodList = ref<Array<Record<string, any>>>([])
const businessList = ref<Array<Record<string, any>>>([])
const ordertypeList = ref<Array<Record<string, any>>>([])
const form = ref<Record<string, any>>({
  customer_id: '',
  customer_name: '',
  follow_method: '',
  follow_time: '',
  follow_business: '',
  order_id: '',
  order_type: '',
  follow_content: ''
})

const descriptionSchema = ref<DescriptionsSchema[]>([
  {
    field: 'customer_name',
    label: t('follow.customer_id')
  },
  {
    field: 'follow_method',
    label: t('follow.follow_method'),
    slots: {
      default: (data: Record<string, any>) => {
        return <span>{useEnumeratePicker(methodList.value, data.follow_method)}</span>
      }
    }
  },
  {
    field: 'follow_time',
    label: t('follow.follow_time')
  },
  {
    field: 'follow_business',
    label: t('follow.follow_business'),
    slots: {
      default: (data: Record<string, any>) => {
        return <span>{useEnumeratePicker(businessList.value, data.follow_business)}</span>
      }
    }
  },
  {
    field: 'order_no',
    label: t('follow.order_no')
  },
  {
    field: 'order_type',
    label: t('follow.order_type'),
    slots: {
      default: (data: Record<string, any>) => {
        return <span>{useEnumeratePicker(ordertypeList.value, data.order_type)}</span>
      }
    }
  },
  {
    field: 'create_time',
    label: t('follow.create_time')
  },
  {
    field: 'creator_name',
    label: t('follow.creator')
  },
  {
    field: 'update_time',
    label: t('follow.update_time')
  },
  {
    field: 'follow_content',
    label: t('follow.follow_content'),
    slots: {
      default: (data: Record<string, any>) => {
        return (
          <textarea disabled="true" name="" id="" cols="30" rows="10">
            {data.follow_content}
          </textarea>
        )
      }
    }
  }
])

//获取枚举
const getDropDownBoxInfo = async () => {
  const resp = await getEnumApi({ field: 'all' })
  methodList.value = resp.data.follow_method
  businessList.value = resp.data.follow_business
  ordertypeList.value = resp.data.order_type
}

//获取回显数据
const getBackShow = async () => {
  const resp = await getInfoApi(query.id as string)
  form.value.customer_id = resp.data.customer_id
  form.value.follow_method = resp.data.follow_method
  form.value.follow_time = resp.data.follow_time
  form.value.follow_business = resp.data.follow_business
  form.value.order_id = resp.data.order_id
  form.value.order_type = resp.data.order_type
  form.value.follow_content = resp.data.follow_content
  form.value.order_no = resp.data.order_no
  form.value.customer_name = resp.data.customer_name
  form.value.creator_name = resp.data.creator_name
  form.value.create_time = resp.data.create_time
  form.value.update_time = resp.data.update_time
}

onMounted(() => {
  getBackShow()
  getDropDownBoxInfo()
})
</script>
<style lang="less" scoped></style>
